<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            canvas {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="cs" width="500" height="500"></canvas>
        <script>
            let cs = document.getElementById("cs");
            let ctx = cs.getContext("2d");
            let width = cs.width,
                height = cs.height;
            if (window.devicePixelRatio) {
                cs.style.width = width + "px";
                cs.style.height = height + "px";
                cs.height = height * window.devicePixelRatio;
                cs.width = width * window.devicePixelRatio;
                ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
            }
            ctx.translate(250, 250);
            ctx.strokeStyle = "black";
            ctx.fillStyle = "white";
            ctx.arc(0, 0, 100, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();

            ctx.beginPath();
            for (let i = 0; i < 60; i++) {
                let sx = Math.cos(((i * Math.PI) / 180) * 6) * 100;
                let sy = Math.sin(((i * Math.PI) / 180) * 6) * 100;
                let dx = Math.cos(((i * Math.PI) / 180) * 6) * 95;
                let dy = Math.sin(((i * Math.PI) / 180) * 6) * 95;
                ctx.lineWidth = 1.5;
                ctx.moveTo(sx, sy);
                ctx.lineTo(dx, dy);
                ctx.stroke();
            }
        </script>
    </body>
</html>
